<template>
	<div class="center-top">
		<div class="datas-item" v-for="(item, i) in infoList" :key="i">
			<div class="icon">
				<img :src="item.icon" alt="" class="image" />
			</div>
			<div class="data-num">
				<div class="number">{{ arr[i] }}</div>
				<div class="des">{{ item.des }}</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import {watch } from "vue"
const props = defineProps({
	list:{
		type:Array,
		default:[]
	}
})
const infoList = $ref([])
let arr = $ref([])
watch(()=>props.list,newV=>{
	infoList = newV.map((it,i)=>{
		let obj = {}
		if(i == 0){
			obj.icon = new URL("../../assets/images/home/duty.png", import.meta.url).href,
			obj.number = it.val2,
			obj.des = it.val1
		}else if(i ==1){
			obj.icon = new URL("../../assets/images/home/money.png", import.meta.url).href,
			obj.number = it.val2,
			obj.des = it.val1
		}else{
			obj.icon = new URL("../../assets/images/home/persons.png", import.meta.url).href,
			obj.number = it.val2,
			obj.des = it.val1
		}
		return obj;
	})

	arr = new Array(infoList.length)

	infoList.forEach((item, index) => {
		jumpNumber(item.number, index)
	})

})


    /**
     * start:起始数据
     * end:最终数据
     * time:动画时间
    * */
    const jumpNumber = (end, index) => {
        let start = 0
        arr[index] = 0
        let endNum = Number(end)
        let lastNum = ''  //小数
        let digit = 0 //小数位数
        let step = 0  //累加步长
        const len = parseInt(end).toString().length
        //判断是小数
        if (parseInt(end) !== endNum) {
            endNum = parseInt(end)
            lastNum = end.toString().split('.')[1]
            digit = lastNum.length
        }
        const timer = setInterval(() => {
            if (arr[index] < (endNum - step)) {
                step++
                //数据过大，后面几位数随机跳动
                if (len >= 6) {
                    let bigNumber = getRandomNum(len - 3)
                    const leng = parseInt(start).toString().length
                    const length = leng - bigNumber.length
                    //截取岁随机数前面的数
                    const cur = length <= 0 ? parseInt(start) : parseInt(start.toString().slice(0, length))
                    start = cur + step + bigNumber
                } else {
                    start = parseInt(start) + step
                }
                arr[index] = parseFloat(start)
            } else {
                clearInterval(timer)
                arr[index] = end
            }
        }, 10)
    }

</script>

<style scoped lang="scss">
@import "../../assets/css/common.scss";
.center-top {
	width: 895px;
	height: 100px;
	background: url("../../assets/images/home/center-top-bg.png") center no-repeat;
	background-size: 100% 100%;
	display: flex;
	align-items: center;

    .datas-item{
        flex: 1;
        display:flex;
        align-items: center;
        // justify-content: center;
        height:54px;
        padding-left:30px;
        .icon{
            width:54px;
            height:54px;
            margin-right:10px;
            .image{
                width:100%;
                height:100%;
            }
        }
        .data-num{
            display:flex;
            flex-direction: column;
            justify-content: space-between;
            .number{
                font-size:28px;
                color:$main-color;
                font-weight:500;
				padding-bottom: 10px;
            }
        }
    }
}
</style>
